<template>
  <div>
    <!-- 
		  目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
		  需求: 每次组件显示不同的数据信息
		  步骤(口诀):
			1. 子组件 - props - 变量 (准备接收)
			2. 父组件 - 传值进去
			
		  文字素材
			好吃的口水鸡   开业大酬宾, 全场8折
			好可爱的可爱多  老板不在家, 全场1折
			好贵的北京烤鸭  好贵啊, 快来啊, 好吃
		-->
    <MyProduct
      title="好吃的口水鸡"
      price="58"
      info="开业大酬宾, 全场8折"
    ></MyProduct>
    <MyProduct
      title="好可爱的可爱多"
      price="8"
      info="老板不在家, 全场1折"
    ></MyProduct>
    <MyProduct title="好贵的北京烤鸭" price="120" :info="str"></MyProduct>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import MyProduct from "./components/MyProduct";
export default {
  data() {
    return {
      str: "好贵啊, 快来啊, 好吃",
    };
  },
  // 3. 注册组件
  components: {
    MyProduct,
  },
};
</script>

<style>
</style>
